<template>
  <el-container class="main_con">
    <el-tabs v-model="activeName">
      <el-tab-pane label="分销商" name="1">
        <div class="filter_con nopt">
          <div class="filter_area">
            <label class="mr_15 mt_15">分销等级</label>
            <el-select v-model="agentLevelType" size="medium" placeholder="请选择" class="mr_15 mt_15">
              <el-option v-for="item in agentLevelTypeList" :key="item.id" :label="item.value" :value="item.id" v-if="item.id<=agent_rank"></el-option>
            </el-select>
          </div>
          <el-button class="mr_15 mt_15" @click="searchList" size="medium">搜索</el-button>
        </div>
        <div class="list_con">
          <el-table :data="list" element-loading-text fit highlight-current-row>
            <el-table-column prop="nickname" label="用户">
              <template slot-scope="scope">
                <div class="user">
                  <div class="face">
                    <vimage
                      :src="scope.row.picurl"
                      style="
                        width: 50px;
                        height: 50px;
                        display: block;
                        border-radius: 50%;
                      "
                    ></vimage>
                  </div>
                  <div class="info">
                    <div class="name" :title="scope.row.name">{{ scope.row.nickname }}</div>
                    <!-- <div class="source"><i class="weixin el-sc-weixin"></i></div> -->
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="level" label="分销商等级">
              <template slot-scope="scope">
                <span v-if="scope.row.level == 1">一级分销</span>
                <span v-if="scope.row.level == 2">二级分销</span>
                <span v-if="scope.row.level == 3">三级分销</span>
              </template>
            </el-table-column>
            <el-table-column prop="agent_total" label="累计佣金"></el-table-column>
            <el-table-column prop="agent_withdraw" label="已提现佣金"></el-table-column>
            <el-table-column prop="create_time" width="240" label="成为分销商时间"></el-table-column>
            <el-table-column prop="child_agent" label="下线总数"></el-table-column>
          </el-table>
          <div class="table_footer" v-show="list.length >= 10">
            <el-pagination @current-change="ChangeCurrent" class="pages" background :page-count="page" :page-size="size" layout="prev, pager, next" :total="total"></el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="下级用户" name="2">
        <div class="list_con">
          <el-table :data="list1" element-loading-text fit highlight-current-row>
            <el-table-column prop="nickname" label="用户">
              <template slot-scope="scope">
                <div class="user">
                  <div class="face">
                    <vimage
                      :src="scope.row.picurl"
                      style="
                        width: 50px;
                        height: 50px;
                        display: block;
                        border-radius: 50%;
                      "
                    ></vimage>
                  </div>
                  <div class="info">
                    <div class="name" :title="scope.row.name">{{ scope.row.nickname }}</div>
                    <!-- <div class="source"><i class="weixin el-sc-weixin"></i></div> -->
                  </div>
                </div>
              </template>
            </el-table-column>
            <!--  <el-table-column prop="level" label="分销商等级">
              <template slot-scope="scope">
                <span v-if="scope.row.level == 1">一级分销</span>
                <span v-if="scope.row.level == 2">二级分销</span>
                <span v-if="scope.row.level == 3">三级分销</span>
              </template>
            </el-table-column> -->
            <el-table-column prop="agent_total" label="累计佣金"></el-table-column>
            <el-table-column prop="agent_withdraw" label="已提现佣金"></el-table-column>
            <el-table-column prop="create_time" width="240" label="成为下线时间"></el-table-column>
            <el-table-column prop="child_agent" label="下线总数"></el-table-column>
          </el-table>
          <div class="table_footer" v-show="list1.length >= 10">
            <el-pagination
              @current-change="ChangeCurrent1"
              class="pages"
              background
              :page-count="page1"
              :page-size="size1"
              layout="prev, pager, next"
              :total="total1"
            ></el-pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-container>
</template>

<script>
import {getAgentLevel} from '@/api/mall/agent';
import {mapGetters} from 'vuex';

export default {
  props: {
    agent_user_id: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      activeName: '1',
      list: [],
      total: 0,
      page: 1,
      size: 10,
      list1: [],
      total1: 0,
      page1: 1,
      size1: 10,
      agentLevelTypeList: [{id: 0, value: '全部'}, {id: 1, value: '一级分销'}, {id: 2, value: '二级分销'}, {id: 3, value: '三级分销'}],
      agentLevelType: 0
    };
  },
  // watch: {
  //   agent_user_id() {
  //     this.page = 1;
  //     this.getAgentLevelList();
  //   }
  // },
 computed: {
   ...mapGetters(["agent_rank"])
 },
  
  created() {
    console.log(this.agent_user_id);
  },
  methods: {
    init(){
      this.page = 1;
      this.getAgentLevelList();
      this.page1 = 1;
      this.getAgentLevelList1();
    },
    getAgentLevelList() {
      let data = {
        user_id: this.agent_user_id,
        level: this.agentLevelType,
        page: this.page,
        size: this.size
      };
      getAgentLevel(data).then(res => {
        this.list = res.msg.data;
        this.total = res.msg.total;
      });
    },
    //切换页码
    ChangeCurrent(page) {
      this.page = page;
      this.getAgentLevelList();
    },
    getAgentLevelList1() {
      let data = {
        user_id: this.agent_user_id,
        level: 4,
        page: this.page1,
        size: this.size1
      };
      getAgentLevel(data).then(res => {
        this.list1 = res.msg.data;
        this.total1 = res.msg.total;
      });
    },
    //切换页码
    ChangeCurrent1(page) {
      this.page1 = page;
      this.getAgentLevelList1();
    },
    // 搜索按钮
    searchList() {
      this.getAgentLevelList();
    }
  }
};
</script>

<style lang="scss" scoped>
.user {
  display: flex;

  .info {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    justify-content: center;
    .name {
      display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
      -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
      overflow: hidden; /*超出的文本隐藏*/
      text-overflow: 'ellipsis'; /* 溢出用省略号*/
      -webkit-box-orient: vertical; /*伸缩盒子的子元素排列：从上到下*/
    }

    .source {
      .weixin {
        font-size: 18px;
        color: #333333;
      }
    }
  }
}
.table_footer {
  justify-content: flex-end;
}
</style>
